<template>
  <div class="table">
    <el-table :data="tableData" border style="width: 100%" max-height="400">
      <!-- <template v-for="(item, index) in headerData">
        <el-table-column
          :prop="item.prop"
          :label="item.lable"
          :width="item.width"
        >
        </el-table-column>
      </template> -->
    </el-table>
    <el-table
      :data="
        tableData.filter(
          (data) =>
            !search || data.name.toLowerCase().includes(search.toLowerCase())
        )
      "
      style="width: 100%"
    >
      <template v-for="(item, index) in headerData">
        <el-table-column
          :prop="item.prop"
          :label="item.lable"
          :width="item.width"
        >
        </el-table-column>
      </template>
      <!-- <el-table-column label="Date" prop="date"> </el-table-column>
      <el-table-column label="Name" prop="name"> </el-table-column> -->
      <el-table-column align="right">
        <template slot="header" slot-scope="scope">
          <el-input v-model="search" size="mini" placeholder="输入关键字搜索" />
        </template>
        <template slot-scope="scope" v-if="btn">
          <el-button size="mini" @click="handleEdit(scope.$index, scope.row)"
            >Edit</el-button
          >
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  props: {
    tableData: {
      type: Array,
      default: [],
    },
    headerData: {
      type: Array,
      default: () => [],
    },
  },
  mounted() {
    console.log(this.headerData);
  },
  data() {
    return {
      tableData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1517 弄",
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1519 弄",
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄",
        },
      ],
      search: "",
    };
  },
};
</script>

<style scoped lang="less">
.table {
  margin-top: 10px;
}
</style>